
<!doctype html>
<html>
<head>
<title>CodeMirror 2: Theme Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../theme/default.css">
<link rel="stylesheet" href="../theme/neat.css">
<link rel="stylesheet" href="../theme/elegant.css">
<link rel="stylesheet" href="../theme/night.css">
<link rel="stylesheet" href="../theme/cobalt.css">
<link rel="stylesheet" href="../theme/eclipse.css">
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../css/docs.css">

<script type="text/javascript">
	
	function setEditorText(text) {
		
		editor.setValue(text);
		AndroidCode.toastIt(text);
	}
	
	function getEditorText() {
		
		var text = editor.getValue();
		AndroidCode.setText(text);
		AndroidCode.toastIt(text);
	}
</script>

<style type="text/css">
.CodeMirror {
	border: 1px solid black;
}
</style>
</head>
<body>

	<form>
		<textarea id="code" name="code">
function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}
</textarea>
	</form>

	<p>
		Select a theme: <select onchange="selectTheme(this)">
			<option selected>default</option>
			<option>night</option>
			<option>neat</option>
			<option>elegant</option>
			<option>cobalt</option>
			<option>eclipse</option>
		</select>
	</p>

	<script>
		var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
			lineNumbers : true
		});
		function selectTheme(node) {
			var theme = node.options[node.selectedIndex].innerHTML;
			editor.setOption("theme", theme);
		}
	</script>
</body>
</html>